const app = new Vue({
    el:'#app',
    data:{
        books:[
            {
                id:1,
                date:'2006-9',
                name:'《算法导论》',
                price:85.00,
                count:1
            },
            {
                id:2,
                date:'2006-2',
                name:'《UNIX编程艺术》',
                price:59.00,
                count:1
            },
            {
                id:3,
                date:'2008-10',
                name:'《编程珠玑》',
                price:39.00,
                count:1
            },
            {
                id:4,
                date:'2006-03',
                name:'《代码大全》',
                price:128.00,
                count:1
            },
        ]
    },
    methods:{
        getFinalPrice(price){
            return '￥'+ price.toFixed(2);
        },
        increment(index){
            this.books[index].count++
        },
        decrement(index){
            this.books[index].count--
        },
        removeHandle(index){
            this.books.splice(index,1)
        },
    },
    computed:{
        totalPrice(){
            // 1.普通的for循环
            let totalPrice =0;
            for(let i = 0; i<this.books.length;i++){
                totalPrice += this.books[i].count * this.books[i].price
            }
            return totalPrice



            // 2.for（let i in this.books）
            // let totalPrice =0;
            // for(let i in this.books){
            //     totalPrice += this.books[i].count * this.books[i].price
            // }
            // return totalPrice


            // 3.for(let i of this.books)
            // let totalPrice = 0;
            // for(let item of this.books){
            //     totalPrice += item.price * item.count
            // }
            // return totalPrice;


            // 4.reduce  高阶函数
        },

    },
    //过滤器
    filters:{
        showPrice(price){
            return '￥'+ price.toFixed(2);
        }
    }
})

//编程范式：命令式编程/申明式编程
//编程范式：面向对象编程（第一公民：对象，尽量把东西抽象成对象）/函数式编程（第一公民：函数，尽量把东西抽象成函数）
//三个高阶函数  filter/map/reduce



///////////////filter/////////////////
//filter中的回调函数有一个要求：必须返回一个Boolean值
//true:当返回true时，函数内部会自动将这次回调的n加入到一个新数组中
//false:当返回是false时，函数内部会自动过滤掉这次的n
// const nums =[10,20,30,40,444,50,111,3,999]


////////////////旧方法/////////////////
// // 1.需求：取出所有小于100的数字
// let newNums =[]
// for(let n of nums){
//     if(n<100){
//         newNums.push(n)
//     }
// }
//
// // 2.将所有小于100的数字进行转换，全部乘以2
// let new2Nums =[];
// for(let n of newNums){
//     new2Nums.push(n)
// }
//
// // 3.将所有new2Nums中的数字相加得到最终结果
// let total =0;
// for(let n of new2Nums){
//     total += n
// }
/////////////////使用高阶函数////////////////
// let newNums = nums.filter(function (n) {
//     return n<100
// })
// console.log(newNums)
//
// //////////////////map函数的使用/////////////////
// let new2Nums = newNums.map(function (n) {
//     return n*2
// })
// console.log(new2Nums)
//
// //////////////////reduce函数的使用/////////////////
// //作用，将数组中所有内容进行汇总
// //假设new2Nums=[20,40,80,100]
// let total = new2Nums.reduce(function (preValue,n) {
//     return preValue + n
// },0)
// console.log(total)
//第一次：preValue=0  n=20
//第二次:preValue=第一次执行的return值 n=40
//第二次:preValue=上次执行的return值 n=80
//第二次:preValue=上次执行的return值 n=100

/////////////////综合使用高阶函数（函数式编程）////////////////
// let total = nums.filter(function (n) {
//     return n<100
// }).map(function (n) {
//     return n*2
// }).reduce(function (preValue,n) {
//     return preValue + n
// },0)
// console.log(total)

/////////////////综合使用高阶函数（函数式编程）---再次精简,使用箭头函数////////////////
// let total = nums.filter(n=> n<100).map(n=> n*2).reduce((pre,n)=> pre + n);
// console.log(total)





